<script setup lang="ts">
import { DeleteCard, getCardListAPI } from '@/apis/card';
import type { Card, CardListParams } from '@/types/card';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';
// 请求参数
const params = ref<CardListParams>({
  page:1,
  pageSize:10,
  // 车牌号码
  carNumber:'',
  // 车主姓名
  personName:'',
  // 车辆状态
  cardStatus:''
})
// 获取月卡列表
const cardList = ref<Card[]>([])
const total = ref(0)
const getCardList = async () =>{
  const res = await getCardListAPI(params.value)
  console.log('获取月卡列表',res) 
  cardList.value = res.data.rows
  total.value = res.data.total
}

getCardList()


// 格式化状态
const formatStatus = (row:Card) =>{
  return row.cardStatus === 0 ? '可用' : '已过期'
}

// 
const onSearch = () =>{
  // 调用接口之前把页数参数重置为1
  // 防止页码 在其他页面时 搜索时数据不够,导致还在原来页码停留
  params.value.page = 1
  getCardList()
}

// 删除月卡
const onDelete =  async(ids:number[]) =>{

  if(ids.length === 0 ) return ElMessage.warning('请选择要删除的月卡')
  // 删除属于危险操作，需要二次弹窗确认
  ElMessageBox.confirm(
    '是否确定删除月卡',
    {
      confirmButtonText:'确认',
      cancelButtonText:'取消',
      type:'warning'
    }
  ).then( async()=>{
   
const res = await DeleteCard(ids)
  console.log ('删除月卡',res)
    ElMessage({
      type:'success',
      message:'删除成功'
    })

    // 重新获取
    getCardList()
  })
 
}


// 已选择列表
const selectionCardList = ref<Card[]>([])
// 多选月卡操作
const handleSelectChange = (arr:Card[]) =>{
  selectionCardList.value = arr
  console.log('多选月卡操作',selectionCardList.value)
}

</script>

<template>
  <div class="car-card-page">
    <!-- 搜索区域 -->
     <div class="searchArea"> 
      <span>车牌号码：</span>
     <el-input v-model="params.carNumber" style="width: 240px" placeholder="请输入车牌号" class="cardNum" />
      <span>车主姓名：</span>
     <el-input v-model="params.personName" style="width: 240px" placeholder="请输入车主姓名" class="userNum" />
      <span>状态：</span>
    <el-select class="statusCls" v-model="params.cardStatus" placeholder="未选择" style="width: 240px" >
    <el-option label="全部" value="" />
    <el-option label="可用" value="0" />
    <el-option label="已过期" value="1" />

  </el-select>
     <el-button type="primary" @click="onSearch">查询</el-button>
    </div>
    <!-- 添加 删除 -->
    <div style="margin-top: 10px; margin-bottom: 20px;" >
        <el-button type="primary" @click="$router.push('/cardAdd')">添加月卡</el-button>
          <el-button @click="onDelete(selectionCardList.map(item => item.id ))">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
     <div style="width: 100vw;" >
       <el-table  @selection-change="handleSelectChange" :data = "cardList"  style=" height: 350; width: 100%; " :header-cell-style="{ background: '#f4f6f8' }"  >
         <el-table-column type="selection" width="55" />
        <el-table-column  type="index" label="序号"   width="80" stripe  />
        <el-table-column prop="personName" label="车主姓名" width="180" />
        <el-table-column prop="phoneNumber" label="联系方式" width="180" />
         <el-table-column prop="carNumber" label="车牌号码" width="180"/>
        <el-table-column prop="carBrand" label="车辆品牌" width="180" />
         <el-table-column prop="totalEffectiveDate" label="剩余有效天数" width="160"/>
        <el-table-column prop="cardStatus" :formatter="formatStatus" label="状态" width="80" />
        <el-table-column prop="address" label="操作" width="260"  >
          <template #default="{row}">
            <el-button size="small" type="text" >续费</el-button>
            <el-button size="small" type="text" >查看</el-button>
            <el-button size="small" type="text" @click="$router.push(`/cardAdd/${row.id}`)">编辑</el-button>
            <el-button size="small" type="text" @click="onDelete([row.id])" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
          <div class="page-container" >
      <el-pagination layout="total, prev, pager, next,sizes"
      :total="total" :page-sizes="[2,5,10,20,50]" v-model:current-page="params.page"
       v-model:page-size="params.pageSize"  @change ="getCardList()"
     >
     </el-pagination>
  </div>
     </div>
  </div>
</template>

<style lang="scss" scoped>

.page-container{
  margin-top: 25px;
  position: fixed;
  right: 30px;
}
/* 表头行背景色 */
.table-header {
  background-color: #f4f6f8 !important; 
}
.statusCls{
  margin-right: 20px;
}
.userNum{
  margin-right: 20px;
}
.cardNum{
  margin-right: 20px;
}
.car-card-page{
  padding: 20px;
}
.searchArea{
 border-bottom: 1px solid rgb(237, 237, 237, .9);
 padding-bottom: 20px;

}
</style>
